<template>
    <div>动态组件,异步组件能一起用</div>
    <div>{{sxbdState}}</div>
    <input type="text" v-model="sxbdInp" @input="sxbdFnc">
</template>
    
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    data() {
        return {
            sxbdInp:'',
        }
    },
    props:{
        sxbdState:String,
        // aaa:String
    },
    methods: {
        sxbdFnc(){
            this.$emit('update:sxbdState',this.sxbdInp);
        }
    },
    beforeCreate() {
        console.log("子组件生命周期beforeCreate");
    },
    created() {
        console.log("子组件生命周期created");
    },
    beforeMount() {
        //属性透传
        //父给子的属性过多，且某些属性也使用的不频繁，那就可以不写再props里面，
        // 没写在props里面的属性就可以在$attrs里面找到
        console.log(this.$attrs.sxtc,888);
        console.log("子组件生命周期beforemount");
    },
    mounted() {
        console.log("子组件生命周期mounted");
    },
    beforeUpdata() {
        console.log("子组件生命周期beforeUpdata");
    },
    updated() {
        console.log("子组件生命周期updated");
    },
    beforeDestroy() {
        console.log("子组件生命周期beforeDestroy");
    },
    destroyed() {
        console.log("子组件生命周期destroyed");
    }
})
</script>
<style scoped>
</style>
